<template>
    <Layout class="layout-container">
        <Content>
            <Spin fix v-if="loading"></Spin>
            <Form ref="form" :model="value" :rules="rules" label-position="left" :label-width="120">
                <Layout class="layout-container">
                    <Content class="padding-all">
                        <FormItem :label="label.name" prop="name">
                            <Input type="text" v-model="value.name" :placeholder="placeholder.name" />
                        </FormItem>
                        <FormItem :label="label.module" prop="module">
                            <Input type="text" v-model="value.module" :placeholder="placeholder.module" />
                        </FormItem>
                        <FormItem :label="label.enable" prop="enable">
                            <iSwitch v-model="value.enable" size="large" :true-value="true" :false-value="false">
                                <span slot="open">{{$t('info.yes')}}</span>
                                <span slot="close">{{$t('info.no')}}</span>
                            </iSwitch>
                        </FormItem>
                        <FormItem :label="label.manual" prop="manual">
                            <iSwitch v-model="value.manual" size="large" :true-value="true" :false-value="false">
                                <span slot="open">{{$t('info.yes')}}</span>
                                <span slot="close">{{$t('info.no')}}</span>
                            </iSwitch>
                        </FormItem>
                        <FormItem :label="label.sort" prop="sort">
                            <InputNumber v-model="value.sort" :min="1" :placeholder="placeholder.sort" style="width:100%;" />
                        </FormItem>
                        <FormItem :label="label.memo" prop="memo">
                            <Input v-model="value.memo" type="textarea" :rows="3" :placeholder="placeholder.memo" />
                        </FormItem>
                    </Content>
                    <div class="padding-all">
                        <span class="pull-right">
                            <Button @click="reset">{{$t('info.reset')}}</Button>
                            <Button type="primary" html-type="submit" @click.prevent="submit">{{$t('info.submit')}}</Button>
                        </span>
                    </div>
                </Layout>
            </Form>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Form, FormItem, Button, Input, Switch, InputNumber } from 'view-design';
import { extendHtml, deleteNullValue } from 'config/utils';

//添加
const URI_SUBMIT = "/security/api/launcher/edit";

export default {
    name: "SysLauncherEdit",
    props: {
        params: Object
    },
    data() {
        const label = {
            name: this.$t("sys.launcher.name"),
            module: this.$t("sys.launcher.module"),
            enable: this.$t("sys.launcher.enable"),
            manual: this.$t("sys.launcher.manual"),
            sort: this.$t("sys.sort"),
            memo: this.$t("sys.memo")
        };
        return {
            loading: false,
            label,
            placeholder: {
                name: this.$t("info.placeholder", [label.name]),
                module: this.$t("info.placeholder", [label.module]),
                sort: this.$t("info.placeholder", [label.sort]),
                memo: this.$t("info.placeholder", [label.memo])
            },
            value: {
                id: '',
                name: '',
                module: '',
                enable: true,
                manual: true,
                sort: 1,
                memo: ""
            },
            rules: {
                name: {
                    label: label.name,
                    required: true,
                    max: 10,
                    trigger: "blur"
                },
                module: {
                    label: label.module,
                    required: true,
                    max: 50,
                    trigger: "blur"
                },
                enable: {
                    label: label.enable,
                    type: "boolean",
                    required: true,
                    trigger: "blur"
                },
                manual: {
                    label: label.manual,
                    type: "boolean",
                    required: true,
                    trigger: "blur"
                },
                sort: {
                    label: label.sort,
                    type: "number",
                    min: 1,
                    trigger: "blur"
                },
                memo: {
                    label: label.memo,
                    max: 100,
                    trigger: "blur"
                }
            }
        };
    },
    methods: {

        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$http.post(URI_SUBMIT, this.value).then((response) => {
                        var res = response.data;
                        if (res.success) {
                            deleteNullValue(res.data);
                            //回调
                            this.$emit('callback', res.data);
                            //关闭窗口
                            this.$emit('close');
                        }
                        this.loading = false;
                    });
                }
            });
            return false;
        },
        reset() {
            this.$refs.form.resetFields();
            extendHtml(this.value, this.params);
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.reset();
        });
    },
    components: {
        Layout,
        Content,
        Spin,
        Form,
        FormItem,
        Button,
        Input,
        iSwitch: Switch,
        InputNumber
    }
}
</script>